import React from 'react';
import { observer } from 'mobx-react';
import { WeaInput } from 'ecCom';

interface Props {
    editable?: boolean;
    value?: string;
    valueSpan?: string;
    onChange: (string) => void;
    column?;
    row?;
    isfrontmultlang?;
}

export default observer((props: Props) => {
    const { column, row, value,isfrontmultlang } = props;
    const valueSpan = row.value[column.key + 'Span'] && row.$(column.key + 'Span').value;
    const valueDesc = column.valueDesc && column.valueDesc(value, row);
    let hide = column && column.isHide && column.isHide(row);
    let fieldlength_tmp: number = 100;
    if (column.fielddbtype && column.fieldtype) {
        if (column.fieldtype == '1') {
            fieldlength_tmp = parseInt(column.fielddbtype.substring(column.fielddbtype.indexOf("(") + 1, column.fielddbtype.length - 1));
        } else if (column.fieldtype == '2') {
            fieldlength_tmp = 11;
        } else {
            fieldlength_tmp = 38;
        }
    }
    const args = isfrontmultlang ? {
        isBase64: true,
        inputType: "multilang",
        i18nLengthValidate: { maxLength: fieldlength_tmp, errorMessage: '' }
    } : {};
    return (
        <div style={hide ? { display: "none" } : { display: "block" }}>
            {props.editable ?
                <WeaInput
                    {...args}
                    stringLength={fieldlength_tmp}
                    value={props.value || ""}
                    onChange={(e) => {
                        props.onChange(e);
                        column.onChange && column.onChange(e, row)
                    }}/>
                : <span>{valueDesc || valueSpan || value}</span>}
        </div>
    )
});
